<template>
    <div class="main" style="display: flex;">
      <div style="width: 360px;height: 580px;overflow-y: auto;margin-right: 30px;box-shadow: 5px 1px 5px 5px #EEF1F6;padding-right: 20px;margin-top: 1px;">
          <div style="margin-bottom: 15px;">
              <div style="margin-top: 10px;">
                  缴费人员：
                  <el-input v-model="input1" placeholder="请输入缴费人员" style="width: 100%;margin-top: 10px;"></el-input>
              </div>
              <div style="margin-top: 15px">
                  缴费名称：
                  <el-input v-model="input2" placeholder="请输入缴费名称" style="width: 100%;margin-top: 10px;"></el-input>
              </div>
              <div style="margin-top: 15px">
                  支付类型：
                  <el-select v-model="select1" clearable placeholder="请选择支付类型" style="width: 100%;margin-top: 10px;">
                      <el-option
                      label="支付宝支付"
                      :value="1">
                      </el-option>
                      <el-option
                      label="微信支付"
                      :value="2">
                      </el-option>
                      <el-option
                      label="银联支付"
                      :value="3">
                      </el-option>
                  </el-select>
              </div>
              <div style="margin-top:15px">
                  支付状态：
                  <el-select v-model="select2" clearable placeholder="请选择支付状态" style="width: 100%;margin-top: 10px;">
                      <el-option
                      label="已支付"
                      :value="1">
                      </el-option>
                      <el-option
                      label="未支付"
                      :value="2">
                      </el-option>
                  </el-select>
              </div>
              <div style="margin-top: 15px;">
                支付时间：
                <el-date-picker
                    v-model="datevalue"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    format="yyyy-MM-dd "
                    value-format="yyyy-MM-dd"
                    style="width: 100%;margin-top: 10px;">
                    </el-date-picker>
                </div>
              <div style="margin-top: 20px">
                  缴费金额：
                  <el-input v-model="input3" placeholder="请输入缴费金额" style="width: 100%;margin-top: 10px;"></el-input>
              </div>
              <div style="margin-top: 10px;">
                    <div  v-show="flag==1">
                        <div @click="tomore" style="color: #89bceb;text-align: center;">
                            <svg t="1722510794961" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5358"  height="10"><path d="M494.4896 955.6992c4.7104 4.5056 11.0592 7.0656 17.6128 7.0656 6.5536 0 12.9024-2.56 17.6128-7.0656m0.1024 0l474.112-454.0416c20.8896-19.968 19.5584-53.1456-1.2288-73.0112s-54.3744-19.968-75.1616-0.1024l-415.3344 397.312-415.232-397.312c-20.8896-19.968-54.4768-19.7632-75.1616 0.1024C0.9216 448.4096-0.4096 481.6896 20.48 501.5552l474.112 454.0416h35.2256z m0 0" p-id="5359" fill="#89bceb"></path><path d="M494.1824 603.3408c4.7104 4.5056 11.0592 6.9632 17.6128 6.9632 6.5536 0 12.9024-2.56 17.6128-6.9632m0.1024 0l474.112-454.0416c20.8896-19.968 19.5584-53.1456-1.2288-73.0112s-54.3744-19.968-75.1616-0.1024l-415.3344 397.312-415.3344-397.312c-20.8896-19.968-54.4768-19.7632-75.1616 0.1024C0.6144 96.1536-0.7168 129.4336 20.1728 149.2992l474.112 454.0416h35.2256z m0 0" p-id="5360" fill="#89bceb"></path></svg>
                            更多
                        </div> 
                    </div>
                    <div  v-show="flag == 2">
                        <div style="margin-top: 20px">
                            缴费优先级：
                            <el-input v-model="input4" placeholder="请输入缴费优先级" style="width: 100%;margin-top: 10px;"></el-input>
                        </div>
                        <div @click="toup" style="color: #89bceb;text-align: center;">
                            <svg t="1722511365600" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6644"  height="10"><path d="M498.095 146.134l403.416 403.415c17.387 17.387 45.576 17.387 62.963 0s17.387-45.576 0-62.963L499.888 22 35.302 486.586c-17.388 17.387-17.388 45.575 0 62.963 17.387 17.387 45.576 17.387 62.964 0L498.095 146.134zM498.817 592.073l402.693 402.693c17.387 17.387 45.576 17.387 62.963 0s17.387-45.576 0-62.963L499.888 467.219 35.302 931.804c-17.388 17.387-17.388 45.576 0 62.963 17.387 17.387 45.576 17.387 62.964 0L498.817 592.073z" fill="#89bceb" p-id="6645"></path></svg>
                            收起
                        </div> 
                    </div>
                </div>
          </div>
          
          <div style="text-align: center;">
              <el-button size="medium"   @click="rewrite" style="width: 150px;" plain>重置</el-button>
              <el-button size="medium"  type="primary"  @click="lookfor" style="width: 150px;">立即查询</el-button>
          </div>
      </div>
      <div style="flex: 1;padding-left: 20px;box-shadow: 5px 1px 5px 5px #EEF1F6;margin-top: 1px;margin-right: 10px;padding-right: 20px;padding-top: 20px;">
          <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
              <h2>缴费列表</h2><el-button icon="el-icon-download" @click="exportpay" type="primary">导出</el-button>
          </div>
          <div style="height: 480px;overflow-y: auto;margin-bottom: 20px;">
              <el-table
                  :data="paydata"
                  border
                  stripe
                  v-loading="loading"
                  style="width: 100%">
                  <el-table-column
                      prop="payname"
                      align="center"
                      label="缴费产品"
                      width="100">
                  </el-table-column>
                  <el-table-column
                      prop="username"
                      label="缴费人员"
                      align="center"
                      width="140">
                      <template slot-scope="scope">
                        {{ scope.row.username == null?"暂无":scope.row.username }}
                      </template>
                  </el-table-column>
                  <el-table-column
                      prop="costtype"
                      align="center"
                      label="支付类型">
                      <template slot-scope="scope">
                        {{ scope.row.costtype == null?"暂无":scope.row.costtype }}
                      </template>
                  </el-table-column>
                  <el-table-column
                      prop="paymoney"
                      align="center"
                      label="缴费金额">
                  </el-table-column>
                  <el-table-column
                      prop="paylevel"
                      align="center"
                      label="缴费优先级">
                  </el-table-column>
                  <el-table-column
                      prop="costtime"
                      align="center"
                      label="支付时间">
                      <template slot-scope="scope">
                        {{ scope.row.costtime == null?"暂无":scope.row.costtime }}
                      </template>
                  </el-table-column>
                  <el-table-column
                      prop="coststatus"
                      align="center"
                      label="支付状态">
                      <template slot-scope="scope">
                        {{ scope.row.coststatus == 2?"未支付":"翼支付" }}
                      </template>
                  </el-table-column>
                 
                  <el-table-column
                      align="center"
                      label="操作"
                      width="220">
                      <template slot-scope="scope">
                        <el-button style="padding: 6px 10px;color: #409EFF;"  size="mini" :disabled="scope.row.parkstatus==1?true:false" @click="openpay(scope.row.id)" plain>查看</el-button>
                        <el-button style="padding: 6px 10px;" size="mini" @click="smallexportpay(scope.row.num)" plain>导出</el-button>
                        <el-button style="padding: 6px 10px;background-color: white;color: black;" size="mini" type="danger" @click="deletepay(scope.row.id)" plain>删除</el-button>
                  </template>
                  </el-table-column>
                  
                  </el-table>
          </div>
          <div style="text-align: right;">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[5, 10, 20, 50]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="paytotal">
              </el-pagination>
          </div>
      </div>
      
    </div>
  </template>
  
  <script>
import * as XLSX from 'xlsx'
  export default {
      data(){
          return{
            loading:false,
            //更多和收起
            flag:1,
              //左侧信息
              input1:"",
              input2:"",
              input3:"",
              input4:"",
              select1:"",
              select2:"",
              datevalue:"",
              //车位信息
              paydata:[],
              //车位载荷
              paypage:{
                username: "",
                payname: "",
                costtype: "",
                coststatus: "",
                startDate: "",
                endDate: "",
                paymoney: "",
                paylevel: "",
                currPage: 0,
                pageNum: 10,
              },
              paytotal:"",
              //移除载荷
              deletepage:{
                  id:"",
                  token:sessionStorage.getItem("token")
              },


              ids:[],
             
          }
      },
      created(){
          this.getpaymessage()
      },
      methods:{
          //初始化页面
          getpaymessage(){
            this.loading = true
              this.$axios.get("http://community.byesame.com/cost/getPayMessage",{params:this.paypage}).then((res)=>{
                  console.log(res.data)
                  this.paydata = res.data.data
                  setTimeout(() => {
                    this.loading = false
                  }, 500);
                  this.paytotal =  res.data.total
                  for(let i =0;i<this.paydata.length;i++){
                    this.paydata[i].num = i
                  }
              })
          },
          //分页器方法
          handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.paypage.currPage = 0
              this.paypage.pageNum = val
              this.getpaymessage()
          },
          handleCurrentChange(val) {
              this.paypage.currPage = val-1;
              this.getpaymessage()
          },
         
          //查询
          lookfor(){
              this.paypage.username= this.input1
              this.paypage.payname = this.input2
              this.paypage.paymoney = this.input3
              this.paypage.paylevel = this.input4
              this.paypage.costtype = this.select1
              this.paypage.coststatus = this.select2
              console.log("时间",this.datevalue)
              if(this.datevalue == null){
                this.paypage.startDate = ""
                this.paypage.endDate = ""
              }else{
                this.paypage.startDate = this.datevalue[0]
                this.paypage.endDate = this.datevalue[1]
              }
              this.paypage.currPage = 0
              this.getpaymessage()
  
          },
          //重置
          rewrite(){
              this.input1 = "",
              this.input2 = "",
              this.input3 = "",
              this.input4 = "",
              this.input5 = "",
              this.select1 = "",
              this.select2 = "",
              this.datevalue = "",
              this.paypage.username= ""
              this.paypage.payname = ""
              this.paypage.paymoney = ""
              this.paypage.paylevel = ""
              this.paypage.costtype = ""
              this.paypage.coststatus = ""
              this.paypage.startDate = ""
              this.paypage.endDate = ""
              this.getpaymessage()
          },
          
          //移除
          deletepay(id){
            this.$confirm('确定删除该支付信息??', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deletepage.id = id
                    this.$axios.get("http://community.byesame.com/cost/delCostData",{params:this.deletepage}).then((res)=>{
                        console.log(res)
                        this.getpaymessage()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                   
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });
            
          },
          
         
          
          
          //更多和收起
          tomore(){
            this.flag = 2
          },
          toup(){
            this.flag = 1
          },
          //导出
        exportpay(){
            let data = []
                for(let i =0;i<this.paydata.length;i++){
                    let a = {
                        "缴费产品":this.paydata[i].payname,
                        "缴费人员":this.paydata[i].username,
                        "支付类型":this.paydata[i].costtype,
                        "缴费金额":this.paydata[i].paymoney,
                        "缴费优先级":this.paydata[i].paylevel,
                        "支付时间":this.paydata[i].costtime,
                        "支付状态":this.paydata[i].coststatus,
                    }
                    data[i]=a
                    
                }
                const worksheet = XLSX.utils.json_to_sheet(data) //传入要导出的表格数据
                // 表格数据
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook,worksheet,"data");//data为自定义表名
                XLSX.writeFile(workbook,"one.xlsx");//ond.xlsx  文件名
        },
        smallexportpay(id){
            console.log(id)
            let i = id
                    let a = {
                        "缴费产品":this.paydata[i].payname,
                        "缴费人员":this.paydata[i].username,
                        "支付类型":this.paydata[i].costtype,
                        "缴费金额":this.paydata[i].paymoney,
                        "缴费优先级":this.paydata[i].paylevel,
                        "支付时间":this.paydata[i].costtime,
                        "支付状态":this.paydata[i].coststatus,
                }
                let data=[]
                data[0] = a
                const worksheet = XLSX.utils.json_to_sheet(data) //传入要导出的表格数据
                // 表格数据
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook,worksheet,"data");//data为自定义表名
                XLSX.writeFile(workbook,"one.xlsx");//ond.xlsx  文件名
        },
        //查看
        openpay(id){
            this.$router.push({
                path:"/pay/paydetail",
                query:{
                    id:id,
                }
            })
        },
          
      }
  }
  </script>
  
  <style scoped>
  ::v-deep .el-table th{
      background-color: #EEF1F6;
  }
  ::v-deep.el-table thead {
    font-weight: bold;
    font-size: 16px;
    color: black;
  }
  ::v-deep .el-table tr{
      color: black;
      font-size: 14px;
  }
  ::v-deep td {
        padding-top:8px !important;
        padding-bottom:8px !important;
    }

  </style>